<template>
  <div :id="fakeId" :key="id" :class="stateClass" class="message-item">
    <template v-if="!isClear">
      <div class="text-container">
        <a-timeline class="superior-timeline">
          <MessageContent v-bind="{ ...$attrs, ...chat }" />
          <!-- <slot>
            <AnswerStatus v-if="chat.isLastOne" v-bind="chat" />
          </slot> -->
          <template v-if="hasStatus">
            <a-timeline-item class="answer-status">
              <template #dot>
                <!-- <div
                  class="state_timeline_dot searching_dot"
                  v-show="
                    chat.answerState !== EAnswerState.SEARCHING &&
                    chat.answerState !== EAnswerState.THINKING
                  "
                ></div> -->

                <div
                  v-show="chat.answerState === EAnswerState.SEARCHING"
                  ref="searching"
                  class="state_timeline_dot searching"
                ></div>
                <div
                  v-show="chat.answerState !== EAnswerState.SEARCHING"
                  ref="thinking"
                  class="state_timeline_dot thinking_dot thinking"
                ></div>
              </template>
              <!-- ①chat的值根据单节点还是多节点的区分，②answerStatus 根据单节点还是多节点判断区分 -->
              <!-- @todo 回答完毕的时候，这块状态不要 -->
              <AnswerStatus v-bind="currentAnswerStatus"
            /></a-timeline-item>
          </template>
        </a-timeline>
      </div>
    </template>
    <div v-else :class="stateClass" class="horizon-line">
      <a-divider :plain="true">上下文已清除</a-divider>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { EAnswerState, ENodeType, type MainItemVo } from '@/api/type'
import { useMessageHook } from './useMessageHook'
import AnswerStatus from './AnswerStatus.vue'
import MessageContent from './MessageContent.vue'
import { inject, onMounted, onUpdated, ref } from 'vue'
import { scroll } from '@/utils'
import { computed } from 'vue'
import lottie, { type AnimationItem } from 'lottie-web'
import { onBeforeUnmount } from 'vue'
import { watch } from 'vue'
import { nextTick } from 'vue'

const chat = defineProps<MainItemVo>()
const { isClear, stateClass } = useMessageHook(chat)

const toBottom = inject(scroll, () => {})
onUpdated(() => {
  if (chat.isLastOne) {
    toBottom()
  }
})

const currentAnswerStatus = computed(() => {
  return chat.nodeType === ENodeType.MULTI_NODE ? chat?.currentNodeMessage : chat
})

const hasStatus = computed(() => {
  return (
    chat.isLastOne &&
    chat.answerState < EAnswerState.FINISH_ANSWER &&
    !chat?.isFlowing &&
    chat.replyState !== 2 &&
    chat.replyState !== 3 && chat.replyState !== 1 && chat.replyState !== true
  )
})

watch(() => hasStatus.value, (newVAl) => {
  if (newVAl) {
    nextTick(() => {
      initLottie()
      initLottie1()
    })
  }
})

onMounted(() => {
  toBottom()
  if (hasStatus.value) {
    initLottie()
    initLottie1()
  }
})
const searching = ref()
const animation = ref<AnimationItem>()
const initLottie = () => {
  const container = searching.value
  // console.log('container', container)
  animation.value = lottie.loadAnimation({
    container: container,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    name: 'demo',
    rendererSettings: {
      imagePreserveAspectRatio: 'meet'
    },
    animationData: {
      v: '5.6.5',
      fr: 60,
      ip: 0,
      op: 80,
      w: 75,
      h: 75,
      nm: 'search',
      ddd: 0,
      assets: [],
      layers: [
        {
          ddd: 0,
          ind: 1,
          ty: 4,
          nm: 'Loupe light',
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: {
              a: 1,
              k: [
                {
                  i: { x: 0.833, y: 0.833 },
                  o: { x: 0.167, y: 0.167 },
                  t: 0,
                  s: [31.964, 24, 0],
                  to: [2.814, 0, 0],
                  ti: [-1.643, -2.028, 0]
                },
                {
                  i: { x: 0.833, y: 0.833 },
                  o: { x: 0.167, y: 0.167 },
                  t: 14.021,
                  s: [38.933, 27.325, 0],
                  to: [1.248, 1.54, 0],
                  ti: [0, -2.137, 0]
                },
                {
                  i: { x: 0.564, y: 0.564 },
                  o: { x: 0.167, y: 0.167 },
                  t: 24.742,
                  s: [40.928, 32.964, 0],
                  to: [0, 4.951, 0],
                  ti: [4.951, 0, 0]
                },
                {
                  i: { x: 0.677, y: 0.677 },
                  o: { x: 0.325, y: 0.325 },
                  t: 43.16,
                  s: [31.964, 41.928, 0],
                  to: [-4.951, 0, 0],
                  ti: [0, 4.951, 0]
                },
                {
                  i: { x: 0.833, y: 0.833 },
                  o: { x: 0.431, y: 0.431 },
                  t: 61.58,
                  s: [23, 32.964, 0],
                  to: [0, -4.951, 0],
                  ti: [-4.951, 0, 0]
                },
                {
                  i: { x: 0.833, y: 0.833 },
                  o: { x: 0.167, y: 0.167 },
                  t: 80,
                  s: [31.964, 24, 0],
                  to: [4.951, 0, 0],
                  ti: [0.208, 0, 0]
                },
                { t: 329, s: [42.589, 32.5, 0] }
              ],
              ix: 2
            },
            a: { a: 0, k: [3.766, 3.766, 0], ix: 1 },
            s: { a: 0, k: [100, 100, 100], ix: 6 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [0.489, 0],
                        [0, 0.489],
                        [-3.389, 0],
                        [0, -0.488],
                        [0.489, 0],
                        [0, -2.413]
                      ],
                      o: [
                        [-0.489, 0],
                        [0, -3.389],
                        [0.489, 0],
                        [0, 0.489],
                        [-2.413, 0],
                        [0, 0.489]
                      ],
                      v: [
                        [-2.631, 3.516],
                        [-3.516, 2.631],
                        [2.631, -3.516],
                        [3.516, -2.631],
                        [2.631, -1.746],
                        [-1.746, 2.631]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [1, 1, 1, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [3.766, 3.766], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Group 1',
              np: 2,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 600,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 2,
          ty: 4,
          nm: 'Loupe',
          parent: 1,
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [6.398, 6.187, 0], ix: 2 },
            a: { a: 0, k: [9.957, 9.957, 0], ix: 1 },
            s: { a: 0, k: [100, 100, 100], ix: 6 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [4.199, 0],
                        [0, 4.2],
                        [-4.199, 0],
                        [0, -4.199]
                      ],
                      o: [
                        [-4.199, 0],
                        [0, -4.199],
                        [4.199, 0],
                        [0, 4.2]
                      ],
                      v: [
                        [-0.001, 7.604],
                        [-7.605, -0.001],
                        [-0.001, -7.605],
                        [7.604, -0.001]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ind: 1,
                  ty: 'sh',
                  ix: 2,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [5.361, 0],
                        [0, -5.361],
                        [-5.361, 0],
                        [0, 5.362]
                      ],
                      o: [
                        [-5.361, 0],
                        [0, 5.362],
                        [5.361, 0],
                        [0, -5.361]
                      ],
                      v: [
                        [-0.001, -9.708],
                        [-9.708, -0.001],
                        [-0.001, 9.708],
                        [9.708, -0.001]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 2',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'mm',
                  mm: 1,
                  nm: 'Merge Paths 1',
                  mn: 'ADBE Vector Filter - Merge',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: {
                    a: 0,
                    k: [0.07058823529411765, 0.1568627450980392, 0.2980392156862745, 1],
                    ix: 4
                  },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [9.957, 9.957], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Group 1',
              np: 4,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 600,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 3,
          ty: 4,
          nm: 'Loupe',
          parent: 1,
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [16.12, 17.088, 0], ix: 2 },
            a: { a: 0, k: [6.223, 6.223, 0], ix: 1 },
            s: { a: 0, k: [100, 100, 100], ix: 6 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [0.871, 0.871],
                        [0, 0],
                        [-0.499, 0.499],
                        [0, 0],
                        [-0.499, -0.499],
                        [0, 0],
                        [0.871, -0.872]
                      ],
                      o: [
                        [0, 0],
                        [-0.499, -0.499],
                        [0, 0],
                        [0.499, -0.499],
                        [0, 0],
                        [0.871, 0.871],
                        [-0.872, 0.871]
                      ],
                      v: [
                        [1.946, 5.102],
                        [-5.474, -2.318],
                        [-5.474, -4.125],
                        [-4.124, -5.474],
                        [-2.318, -5.474],
                        [5.102, 1.946],
                        [5.102, 5.102]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: {
                    a: 0,
                    k: [0.07058823529411765, 0.1568627450980392, 0.2980392156862745, 1],
                    ix: 4
                  },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [6.223, 6.223], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Group 1',
              np: 2,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 600,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 4,
          ty: 4,
          nm: 'Text zoomed mask',
          parent: 1,
          td: 1,
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [6.203, 6.091, 0], ix: 2 },
            a: { a: 0, k: [5.089, 3.964, 0], ix: 1 },
            s: { a: 0, k: [100, 100, 100], ix: 6 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [-4.951, 0],
                        [0, -4.951],
                        [4.951, 0],
                        [0, 4.951]
                      ],
                      o: [
                        [4.951, 0],
                        [0, 4.951],
                        [-4.951, 0],
                        [0, -4.951]
                      ],
                      v: [
                        [0, -8.964],
                        [8.964, 0],
                        [0, 8.964],
                        [-8.964, 0]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [0.25098039215686274, 0.4823529411764706, 1, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [5.089, 3.964], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Ellipse 1',
              np: 3,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 600,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 5,
          ty: 4,
          nm: 'Text zoomed',
          tt: 1,
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [32.128, 27.158, 0], ix: 2 },
            a: { a: 0, k: [10.355, 1.749, 0], ix: 1 },
            s: { a: 0, k: [130, 130, 100], ix: 6 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [0.828, 0],
                        [0, 0],
                        [0, 0.828],
                        [-0.828, 0],
                        [0, 0],
                        [0, -0.828]
                      ],
                      o: [
                        [0, 0],
                        [-0.828, 0],
                        [0, -0.828],
                        [0, 0],
                        [0.828, 0],
                        [0, 0.828]
                      ],
                      v: [
                        [8.607, 1.499],
                        [-8.607, 1.499],
                        [-10.105, 0],
                        [-8.607, -1.499],
                        [8.607, -1.499],
                        [10.105, 0]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [0.25098039215686274, 0.4823529411764706, 1, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [10.355, 1.749], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Group 1',
              np: 2,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 600,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 6,
          ty: 4,
          nm: 'Text zoomed mask',
          parent: 1,
          td: 1,
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [6.203, 6.091, 0], ix: 2 },
            a: { a: 0, k: [5.089, 3.964, 0], ix: 1 },
            s: { a: 0, k: [100, 100, 100], ix: 6 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  d: 1,
                  ty: 'el',
                  s: { a: 0, k: [17.928, 17.928], ix: 2 },
                  p: { a: 0, k: [0, 0], ix: 3 },
                  nm: 'Ellipse Path 1',
                  mn: 'ADBE Vector Shape - Ellipse',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [0.25098039215686274, 0.4823529411764706, 1, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [5.089, 3.964], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Ellipse 1',
              np: 3,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 600,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 7,
          ty: 4,
          nm: 'Text zoomed',
          tt: 1,
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [32.128, 33.352, 0], ix: 2 },
            a: { a: 0, k: [12.583, 1.749, 0], ix: 1 },
            s: { a: 0, k: [130, 130, 100], ix: 6 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [0.827, 0],
                        [0, 0],
                        [0, 0.828],
                        [-0.829, 0],
                        [0, 0],
                        [0, -0.828]
                      ],
                      o: [
                        [0, 0],
                        [-0.829, 0],
                        [0, -0.828],
                        [0, 0],
                        [0.827, 0],
                        [0, 0.828]
                      ],
                      v: [
                        [10.835, 1.499],
                        [-10.835, 1.499],
                        [-12.333, 0],
                        [-10.835, -1.499],
                        [10.835, -1.499],
                        [12.333, 0]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [0.25098039215686274, 0.4823529411764706, 1, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [12.583, 1.749], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Group 1',
              np: 2,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 600,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 8,
          ty: 4,
          nm: 'Text zoomed mask',
          parent: 1,
          td: 1,
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [6.203, 6.091, 0], ix: 2 },
            a: { a: 0, k: [5.089, 3.964, 0], ix: 1 },
            s: { a: 0, k: [100, 100, 100], ix: 6 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  d: 1,
                  ty: 'el',
                  s: { a: 0, k: [17.928, 17.928], ix: 2 },
                  p: { a: 0, k: [0, 0], ix: 3 },
                  nm: 'Ellipse Path 1',
                  mn: 'ADBE Vector Shape - Ellipse',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [0.25098039215686274, 0.4823529411764706, 1, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [5.089, 3.964], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Ellipse 1',
              np: 3,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 600,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 9,
          ty: 4,
          nm: 'Text zoomed',
          tt: 1,
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [32.128, 39.184, 0], ix: 2 },
            a: { a: 0, k: [7.49, 1.749, 0], ix: 1 },
            s: { a: 0, k: [130, 130, 100], ix: 6 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [0.828, 0],
                        [0, 0],
                        [0, 0.828],
                        [-0.829, 0],
                        [0, 0],
                        [0, -0.828]
                      ],
                      o: [
                        [0, 0],
                        [-0.829, 0],
                        [0, -0.828],
                        [0, 0],
                        [0.828, 0],
                        [0, 0.828]
                      ],
                      v: [
                        [5.741, 1.499],
                        [-5.741, 1.499],
                        [-7.24, 0],
                        [-5.741, -1.499],
                        [5.741, -1.499],
                        [7.24, 0]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [0.25098039215686274, 0.4823529411764706, 1, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [7.49, 1.749], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Group 1',
              np: 2,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 600,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 10,
          ty: 4,
          nm: 'Text',
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [32.128, 39.184, 0], ix: 2 },
            a: { a: 0, k: [7.49, 1.749, 0], ix: 1 },
            s: { a: 0, k: [100, 100, 100], ix: 6 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [0.828, 0],
                        [0, 0],
                        [0, 0.828],
                        [-0.829, 0],
                        [0, 0],
                        [0, -0.828]
                      ],
                      o: [
                        [0, 0],
                        [-0.829, 0],
                        [0, -0.828],
                        [0, 0],
                        [0.828, 0],
                        [0, 0.828]
                      ],
                      v: [
                        [5.741, 1.499],
                        [-5.741, 1.499],
                        [-7.24, 0],
                        [-5.741, -1.499],
                        [5.741, -1.499],
                        [7.24, 0]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [0.804613659429, 0.837611299403, 0.858900122549, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [7.49, 1.749], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Group 1',
              np: 2,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 600,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 11,
          ty: 4,
          nm: 'Text',
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [32.128, 33.352, 0], ix: 2 },
            a: { a: 0, k: [12.583, 1.749, 0], ix: 1 },
            s: { a: 0, k: [100, 100, 100], ix: 6 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [0.827, 0],
                        [0, 0],
                        [0, 0.828],
                        [-0.829, 0],
                        [0, 0],
                        [0, -0.828]
                      ],
                      o: [
                        [0, 0],
                        [-0.829, 0],
                        [0, -0.828],
                        [0, 0],
                        [0.827, 0],
                        [0, 0.828]
                      ],
                      v: [
                        [10.835, 1.499],
                        [-10.835, 1.499],
                        [-12.333, 0],
                        [-10.835, -1.499],
                        [10.835, -1.499],
                        [12.333, 0]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [0.804613659429, 0.837611299403, 0.858900122549, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [12.583, 1.749], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Group 1',
              np: 2,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 600,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 12,
          ty: 4,
          nm: 'Text',
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [32.128, 27.158, 0], ix: 2 },
            a: { a: 0, k: [10.355, 1.749, 0], ix: 1 },
            s: { a: 0, k: [100, 100, 100], ix: 6 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [0.828, 0],
                        [0, 0],
                        [0, 0.828],
                        [-0.828, 0],
                        [0, 0],
                        [0, -0.828]
                      ],
                      o: [
                        [0, 0],
                        [-0.828, 0],
                        [0, -0.828],
                        [0, 0],
                        [0.828, 0],
                        [0, 0.828]
                      ],
                      v: [
                        [8.607, 1.499],
                        [-8.607, 1.499],
                        [-10.105, 0],
                        [-8.607, -1.499],
                        [8.607, -1.499],
                        [10.105, 0]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [0.804613659429, 0.837611299403, 0.858900122549, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [10.355, 1.749], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Group 1',
              np: 2,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 600,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 13,
          ty: 4,
          nm: 'Paper zoomed mask',
          parent: 1,
          td: 1,
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [6.203, 6.091, 0], ix: 2 },
            a: { a: 0, k: [5.089, 3.964, 0], ix: 1 },
            s: { a: 0, k: [100, 100, 100], ix: 6 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  d: 1,
                  ty: 'el',
                  s: { a: 0, k: [17.928, 17.928], ix: 2 },
                  p: { a: 0, k: [0, 0], ix: 3 },
                  nm: 'Ellipse Path 1',
                  mn: 'ADBE Vector Shape - Ellipse',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [0.25098039215686274, 0.4823529411764706, 1, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [5.089, 3.964], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Ellipse 1',
              np: 3,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 600,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 14,
          ty: 4,
          nm: 'Paper zoomed',
          tt: 1,
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [31.948, 37.5, 0], ix: 2 },
            a: { a: 0, k: [15.584, 21.038, 0], ix: 1 },
            s: { a: 0, k: [130, 130, 100], ix: 6 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [2.632, 0],
                        [0, 0],
                        [0, 2.632],
                        [0, 0],
                        [-2.632, 0],
                        [0, 0],
                        [0, -2.632],
                        [0, 0]
                      ],
                      o: [
                        [0, 0],
                        [-2.632, 0],
                        [0, 0],
                        [0, -2.632],
                        [0, 0],
                        [2.632, 0],
                        [0, 0],
                        [0, 2.632]
                      ],
                      v: [
                        [10.568, 20.788],
                        [-10.568, 20.788],
                        [-15.334, 16.022],
                        [-15.334, -16.022],
                        [-10.568, -20.788],
                        [10.568, -20.788],
                        [15.334, -16.022],
                        [15.334, 16.022]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [0.91607504452, 0.929933256261, 0.939460784314, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [15.584, 21.038], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Group 1',
              np: 2,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 600,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 15,
          ty: 4,
          nm: 'Paper',
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [31.948, 37.5, 0], ix: 2 },
            a: { a: 0, k: [15.584, 21.038, 0], ix: 1 },
            s: { a: 0, k: [100, 100, 100], ix: 6 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [2.632, 0],
                        [0, 0],
                        [0, 2.632],
                        [0, 0],
                        [-2.632, 0],
                        [0, 0],
                        [0, -2.632],
                        [0, 0]
                      ],
                      o: [
                        [0, 0],
                        [-2.632, 0],
                        [0, 0],
                        [0, -2.632],
                        [0, 0],
                        [2.632, 0],
                        [0, 0],
                        [0, 2.632]
                      ],
                      v: [
                        [10.568, 20.788],
                        [-10.568, 20.788],
                        [-15.334, 16.022],
                        [-15.334, -16.022],
                        [-10.568, -20.788],
                        [10.568, -20.788],
                        [15.334, -16.022],
                        [15.334, 16.022]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [0.91607504452, 0.929933256261, 0.939460784314, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [15.584, 21.038], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Group 1',
              np: 2,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 600,
          st: 0,
          bm: 0
        }
      ],
      markers: []
    }
  })
  animation.value?.play()
}

const thinking = ref()
const animation1 = ref<AnimationItem>()
const initLottie1 = () => {
  const container = thinking.value
  // console.log('container', container)
  animation1.value = lottie.loadAnimation({
    container: container,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    name: 'demo',
    rendererSettings: {
      imagePreserveAspectRatio: 'meet'
    },
    animationData: {
      v: '5.7.8',
      fr: 29.9700012207031,
      ip: 0,
      op: 65.0000026475043,
      w: 300,
      h: 300,
      nm: 'light',
      ddd: 1,
      assets: [],
      layers: [
        {
          ddd: 0,
          ind: 1,
          ty: 4,
          nm: 'Shape Layer 3',
          td: 1,
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [150, 150, 0], ix: 2, l: 2 },
            a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 },
            s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ty: 'rc',
                  d: 1,
                  s: { a: 0, k: [217.282, 165.866], ix: 2 },
                  p: { a: 0, k: [0, 0], ix: 3 },
                  r: { a: 0, k: 0, ix: 4 },
                  nm: 'Rectangle Path 1',
                  mn: 'ADBE Vector Shape - Rect',
                  hd: false
                },
                {
                  ty: 'st',
                  c: { a: 0, k: [0.945097979377, 0.792156982422, 0.1294119891, 1], ix: 3 },
                  o: { a: 0, k: 100, ix: 4 },
                  w: { a: 0, k: 2, ix: 5 },
                  lc: 1,
                  lj: 1,
                  ml: 4,
                  bm: 0,
                  nm: 'Stroke 1',
                  mn: 'ADBE Vector Graphic - Stroke',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [0.892189919949, 0, 0, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [1.641, -24.067], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 102.786], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Rectangle 1',
              np: 3,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 65.0000026475043,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 2,
          ty: 4,
          nm: 'Shape Layer 1',
          tt: 1,
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [150, 150, 0], ix: 2, l: 2 },
            a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 },
            s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ty: 'rc',
                  d: 1,
                  s: {
                    a: 1,
                    k: [
                      {
                        i: { x: [0.667, 0.667], y: [1, 1] },
                        o: { x: [0.333, 0.333], y: [0, 0] },
                        t: 26,
                        s: [0, 0]
                      },
                      {
                        i: { x: [0.833, 0.833], y: [1, 1] },
                        o: { x: [0.167, 0.167], y: [0, 0] },
                        t: 31,
                        s: [0, 15]
                      },
                      {
                        i: { x: [0.667, 0.667], y: [1, 1] },
                        o: { x: [0.333, 0.333], y: [0, 0] },
                        t: 43,
                        s: [0, 0]
                      },
                      { t: 52.0000021180034, s: [0, 15] }
                    ],
                    ix: 2
                  },
                  p: {
                    a: 1,
                    k: [
                      {
                        i: { x: 0.667, y: 1 },
                        o: { x: 0.333, y: 0 },
                        t: 26,
                        s: [0, 69],
                        to: [0, 3.667],
                        ti: [0, 0]
                      },
                      {
                        i: { x: 0.833, y: 1 },
                        o: { x: 0.167, y: 0 },
                        t: 31,
                        s: [0, 91],
                        to: [0, 0],
                        ti: [0, 0]
                      },
                      {
                        i: { x: 0.667, y: 1 },
                        o: { x: 0.333, y: 0 },
                        t: 43,
                        s: [0, 69],
                        to: [0, 0],
                        ti: [0, -3.667]
                      },
                      { t: 52.0000021180034, s: [0, 91] }
                    ],
                    ix: 3
                  },
                  r: { a: 0, k: 0, ix: 4 },
                  nm: 'Rectangle Path 1',
                  mn: 'ADBE Vector Shape - Rect',
                  hd: false
                },
                {
                  ty: 'st',
                  c: { a: 0, k: [0.945098099054, 0.792156922583, 0.129411764706, 1], ix: 3 },
                  o: { a: 0, k: 100, ix: 4 },
                  w: { a: 0, k: 7, ix: 5 },
                  lc: 1,
                  lj: 2,
                  bm: 0,
                  nm: 'Stroke 1',
                  mn: 'ADBE Vector Graphic - Stroke',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [0.867570226333, 0.063984612858, 0.063984612858, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tm',
                  s: { a: 0, k: 0, ix: 1 },
                  e: { a: 0, k: 100, ix: 2 },
                  o: { a: 0, k: 0, ix: 3 },
                  m: 1,
                  ix: 4,
                  nm: 'Trim Paths 1',
                  mn: 'ADBE Vector Filter - Trim',
                  hd: false
                },
                {
                  ty: 'rp',
                  c: { a: 0, k: 6, ix: 1 },
                  o: { a: 0, k: 0, ix: 2 },
                  m: 1,
                  ix: 5,
                  tr: {
                    ty: 'tr',
                    p: { a: 0, k: [0, 0], ix: 2 },
                    a: { a: 0, k: [0, 0], ix: 1 },
                    s: { a: 0, k: [100, 100], ix: 3 },
                    r: { a: 0, k: 60, ix: 4 },
                    so: { a: 0, k: 100, ix: 5 },
                    eo: { a: 0, k: 100, ix: 6 },
                    nm: 'Transform'
                  },
                  nm: 'Repeater 1',
                  mn: 'ADBE Vector Filter - Repeater',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [0, -1], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 60, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Rectangle 1',
              np: 5,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 65.0000026475043,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 3,
          ty: 4,
          nm: 'Shape Layer 2',
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [150, 150, 0], ix: 2, l: 2 },
            a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 },
            s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [31.126, 0],
                        [0, -31.126],
                        [-31.126, 0],
                        [0, 31.126]
                      ],
                      o: [
                        [-31.126, 0],
                        [0, 31.126],
                        [31.126, 0],
                        [0, -31.126]
                      ],
                      v: [
                        [0, -56.358],
                        [-56.358, 0],
                        [0, 56.358],
                        [56.358, 0]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'tm',
                  s: {
                    a: 1,
                    k: [
                      { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 0, s: [100] },
                      { t: 14.0000005702317, s: [15] }
                    ],
                    ix: 1
                  },
                  e: {
                    a: 1,
                    k: [
                      { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 9, s: [100] },
                      { t: 19.0000007738859, s: [15] }
                    ],
                    ix: 2
                  },
                  o: { a: 0, k: -207, ix: 3 },
                  m: 1,
                  ix: 2,
                  nm: 'Trim Paths 1',
                  mn: 'ADBE Vector Filter - Trim',
                  hd: false
                },
                {
                  ty: 'st',
                  c: { a: 0, k: [0.945098099054, 0.792156922583, 0.129411764706, 1], ix: 3 },
                  o: { a: 0, k: 100, ix: 4 },
                  w: { a: 0, k: 5, ix: 5 },
                  lc: 2,
                  lj: 1,
                  ml: 4,
                  bm: 0,
                  nm: 'Stroke 1',
                  mn: 'ADBE Vector Graphic - Stroke',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [-0.25, -0.25], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [132.514, 132.514], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Ellipse 1',
              np: 4,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 65.0000026475043,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 4,
          ty: 4,
          nm: 'Ã¥ÂÂÃ¥Â±Â¤ 3 Outlines',
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [150, 150, 0], ix: 2, l: 2 },
            a: { a: 0, k: [150, 150, 0], ix: 1, l: 2 },
            s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [0, 0],
                        [0, 0],
                        [0, 0],
                        [0, 0]
                      ],
                      o: [
                        [0, 0],
                        [0, 0],
                        [0, 0],
                        [0, 0]
                      ],
                      v: [
                        [25.617, 2.1],
                        [-25.617, 2.1],
                        [-25.617, -2.101],
                        [25.617, -2.101]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [1, 1, 1, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [150, 227.555], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Group 1',
              np: 2,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 65.0000026475043,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 5,
          ty: 4,
          nm: 'Ã¥ÂÂÃ¥Â±Â¤ 4 Outlines',
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [150, 150, 0], ix: 2, l: 2 },
            a: { a: 0, k: [150, 150, 0], ix: 1, l: 2 },
            s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [0, 0],
                        [0, 0],
                        [0, 0],
                        [0, 0]
                      ],
                      o: [
                        [0, 0],
                        [0, 0],
                        [0, 0],
                        [0, 0]
                      ],
                      v: [
                        [25.617, 2.101],
                        [-25.617, 2.101],
                        [-25.617, -2.1],
                        [25.617, -2.1]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [1, 1, 1, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [150, 219.526], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Group 1',
              np: 2,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 65.0000026475043,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 6,
          ty: 4,
          nm: 'Ã¥ÂÂÃ¥Â±Â¤ 5 Outlines',
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [150, 150, 0], ix: 2, l: 2 },
            a: { a: 0, k: [150, 150, 0], ix: 1, l: 2 },
            s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [0, -0.271],
                        [0, 0],
                        [-5.212, 0],
                        [0, 0],
                        [0, 5.212],
                        [0, 0],
                        [0.271, 0],
                        [0, 0]
                      ],
                      o: [
                        [0, 0],
                        [0, 5.212],
                        [0, 0],
                        [5.212, 0],
                        [0, 0],
                        [0, -0.271],
                        [0, 0],
                        [-0.272, 0]
                      ],
                      v: [
                        [-25.617, -12.685],
                        [-25.617, 3.738],
                        [-16.18, 13.176],
                        [16.181, 13.176],
                        [25.617, 3.738],
                        [25.617, -12.685],
                        [25.127, -13.176],
                        [-25.126, -13.176]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [0.01568627451, 0, 0, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [150, 225.454], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Group 1',
              np: 2,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 65.0000026475043,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 7,
          ty: 4,
          nm: 'Ã¥ÂÂÃ¥Â±Â¤ 6 Outlines',
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [150, 150, 0], ix: 2, l: 2 },
            a: { a: 0, k: [150, 150, 0], ix: 1, l: 2 },
            s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [4.635, 0],
                        [0, 0],
                        [0, 4.315],
                        [0, 0],
                        [-0.319, 0],
                        [0, 0],
                        [0, -0.319]
                      ],
                      o: [
                        [0, 0],
                        [-4.316, 0],
                        [0, 0],
                        [0, -0.319],
                        [0, 0],
                        [0.319, 0],
                        [0, 4.635]
                      ],
                      v: [
                        [7.782, 4.484],
                        [-8.359, 4.484],
                        [-16.173, -3.329],
                        [-16.173, -3.908],
                        [-15.596, -4.484],
                        [15.596, -4.484],
                        [16.174, -3.908]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [0.01568627451, 0, 0, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [150.001, 245.516], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Group 1',
              np: 2,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 65.0000026475043,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 8,
          ty: 4,
          nm: 'Ã¥ÂÂÃ¥Â±Â¤ 7 Outlines',
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [150, 150, 0], ix: 2, l: 2 },
            a: { a: 0, k: [150, 150, 0], ix: 1, l: 2 },
            s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [0.382, 0],
                        [0.398, 0.636],
                        [10.177, 3.167],
                        [-0.345, 1.107],
                        [-1.108, -0.357],
                        [-6.192, -9.937],
                        [0.985, -0.616]
                      ],
                      o: [
                        [-0.698, 0],
                        [-5.654, -9.084],
                        [-1.107, -0.345],
                        [0.34, -1.104],
                        [11.14, 3.467],
                        [0.611, 0.985],
                        [-0.349, 0.213]
                      ],
                      v: [
                        [12.835, 12.178],
                        [11.05, 11.189],
                        [-13.504, -7.808],
                        [-14.886, -10.438],
                        [-12.256, -11.821],
                        [14.62, 8.965],
                        [13.947, 11.863]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [1, 1, 1, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [176.732, 115.159], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Group 1',
              np: 2,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 65.0000026475043,
          st: 0,
          bm: 0
        },
        {
          ddd: 1,
          ind: 9,
          ty: 4,
          nm: 'Ã¥ÂÂÃ¥Â±Â¤ 8 Outlines',
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            rx: { a: 0, k: 0, ix: 8 },
            ry: { a: 0, k: 0, ix: 9 },
            rz: { a: 0, k: 0, ix: 10 },
            or: { a: 0, k: [0, 0, 0], ix: 7 },
            p: { a: 0, k: [150, 150, 0], ix: 2 },
            a: { a: 0, k: [150, 150, 0], ix: 1 },
            s: { a: 0, k: [100, 100, 100], ix: 6 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [35.473, -3.935],
                        [2.942, -26.981],
                        [-18.8, -11.323],
                        [0, -3.346],
                        [0, 0],
                        [-0.265, 0],
                        [0, 0],
                        [0, 0.266],
                        [0, 0],
                        [-2.865, 1.726],
                        [0, 21.377]
                      ],
                      o: [
                        [-26.976, 2.993],
                        [-2.627, 24.091],
                        [2.867, 1.726],
                        [0, 0],
                        [0, 0.277],
                        [0, 0],
                        [0.265, 0],
                        [0, 0],
                        [0, -3.344],
                        [17.068, -10.278],
                        [0, -34.678]
                      ],
                      v: [
                        [-5.589, -56.725],
                        [-57.285, -4.913],
                        [-29.141, 51.994],
                        [-24.484, 60.141],
                        [-24.484, 60.182],
                        [-24.003, 60.66],
                        [26.271, 60.66],
                        [26.751, 60.18],
                        [26.751, 60.125],
                        [31.404, 51.996],
                        [59.913, 1.681]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [0.945098099054, 0.792156922583, 0.129411764706, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [148.867, 148.054], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Group 1',
              np: 2,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 0,
          op: 65.0000026475043,
          st: 0,
          bm: 0
        },
        {
          ddd: 0,
          ind: 11,
          ty: 4,
          nm: 'Ã¥ÂÂÃ¥Â±Â¤ 10 Outlines',
          sr: 1,
          ks: {
            o: { a: 0, k: 100, ix: 11 },
            r: { a: 0, k: 0, ix: 10 },
            p: { a: 0, k: [150, 150, 0], ix: 2, l: 2 },
            a: { a: 0, k: [150, 150, 0], ix: 1, l: 2 },
            s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 }
          },
          ao: 0,
          shapes: [
            {
              ty: 'gr',
              it: [
                {
                  ind: 0,
                  ty: 'sh',
                  ix: 1,
                  ks: {
                    a: 0,
                    k: {
                      i: [
                        [0, -80.081],
                        [80.081, 0],
                        [0, 80.081],
                        [-80.081, 0]
                      ],
                      o: [
                        [0, 80.081],
                        [-80.081, 0],
                        [0, -80.081],
                        [80.081, 0]
                      ],
                      v: [
                        [145, 0],
                        [0, 145],
                        [-145, 0],
                        [0, -145]
                      ],
                      c: true
                    },
                    ix: 2
                  },
                  nm: 'Path 1',
                  mn: 'ADBE Vector Shape - Group',
                  hd: false
                },
                {
                  ty: 'fl',
                  c: { a: 0, k: [1, 1, 1, 1], ix: 4 },
                  o: { a: 0, k: 100, ix: 5 },
                  r: 1,
                  bm: 0,
                  nm: 'Fill 1',
                  mn: 'ADBE Vector Graphic - Fill',
                  hd: false
                },
                {
                  ty: 'tr',
                  p: { a: 0, k: [150, 150], ix: 2 },
                  a: { a: 0, k: [0, 0], ix: 1 },
                  s: { a: 0, k: [100, 100], ix: 3 },
                  r: { a: 0, k: 0, ix: 6 },
                  o: { a: 0, k: 100, ix: 7 },
                  sk: { a: 0, k: 0, ix: 4 },
                  sa: { a: 0, k: 0, ix: 5 },
                  nm: 'Transform'
                }
              ],
              nm: 'Group 1',
              np: 2,
              cix: 2,
              bm: 0,
              ix: 1,
              mn: 'ADBE Vector Group',
              hd: false
            }
          ],
          ip: 65.0000026475043,
          op: 65.0000026475043,
          st: 0,
          bm: 0,
          hidden: 0
        }
      ],
      markers: []
    }
  })
  animation1.value?.play()
}

onBeforeUnmount(() => {
  // animation1.value?.destroy()
  // animation.value?.destroy()
})
</script>
<style lang="scss" scoped>
.message-item {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  margin-bottom: 16px;
  font-size: 24px;
  // background: #fff;

  &:nth-last-of-type(1) {
    &:not(.clear) {
      margin-bottom: 50px;
    }
  }
  &.question {
    justify-content: flex-end;
    .user-avatar {
      padding-left: 10px;
    }
    .text-container {
      align-items: flex-end;
    }
  }
  &.answer {
    justify-content: flex-start;
    background: #fff;
    border-radius: 8px;
    .user-avatar {
      padding-right: 10px;
    }
    .text-container {
      align-items: flex-start;
    }
  }
  .user-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    opacity: 0;
    flex: 0;
    &.show {
      opacity: 1;
    }
    .username {
      font-size: 12px;
    }
    .avatar {
      width: 70px;
      height: 70px;
      border-radius: 10px;
      margin-bottom: 5px;
    }
  }
  .text-container {
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    color: #999;
    position: relative;
    z-index: 1;
    overflow: hidden;
    .username {
      font-size: 24px;
      margin-bottom: 8px;
    }
  }
  .answer-status {
    padding: 0 20px;
    :deep() {
      .ant-timeline-item-head-custom:has(.state_timeline_dot) {
        top: 0px;
        left: 25px;
        background-color: transparent;
      }
      .ant-timeline-item-content {
        top: -10px;
      }
    }
  }
  .ant-timeline.superior-timeline {
    max-width: 100%;
    width: 100%;
    &:has(.answer-status) {
      padding-top: 30px;
    }
    :deep() {
      .ant-timeline-item-content {
        max-width: 100%;
        overflow: hidden;
      }
      .ant-timeline-item-tail {
        border-left: 4px solid #0cc2f7;
      }
      .state_timeline_dot {
        // display: inline-block;
        width: 30px;
        height: 30px;
        // background: url('@/assets/thinking.png') no-repeat;
        // background-size: 100% 100%;
      }
      .searching_dot {
        // background-image: url('@/assets/searching.png');
        background: url('@/assets/thinking.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}

.horizon-line {
  position: relative;
  box-sizing: border-box;
  padding: 20px 0;
  text-align: center;
  font-size: 14px;
  color: #999;
  min-width: 100%;
}

.searching {
  width: 38px;
  height: 38px;
  svg {
    width: unset !important;
  }
}
</style>
